<%@page import="com.entity.Cart"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>买买买！我喜欢</title>
<script src="/ProfessionalDesign/js/jquery.min.js"></script>
<link href="/ProfessionalDesign/css/bootstrap.min.css" rel="stylesheet">
<link href="/ProfessionalDesign/css/settlement.css" rel="stylesheet">
<!-- 导入bootstrap -->
<!-- 导入JQuery方便使用ajax插件 -->
<script src="/ProfessionalDesign/js/bootstrap.min.js"></script>
<!-- 导入bootstrap核心js文件 -->
</head>
<!-- 背景使用的是淘宝的链接图片 -->
<body style="background: transparent;">
	<!-- 头部导航栏 -->
	<nav class="navbar navbar-default navbar-static-top"
		style="margin-bottom: 0px;">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#myNavbar">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<c:if test="${user.username!=null}">
				<a class="navbar-brand" id="top"
					style='padding-left: 300px; color: red'
					href="/ProfessionalDesign/login">尊贵的用户"${user.username}"欢迎您</a>
			</c:if>
			<c:if test="${user.username==null}">
				<a class="navbar-brand" id="top"
					style='padding-left: 300px; color: red'
					href="/ProfessionalDesign/login">亲，请登录</a>
			</c:if>

		</div>
		<div class="collapse navbar-collapse" id="myNavbar">
			<ul class="nav navbar-nav" style="padding-left: 100px">
				<li><a id="spc1" href="sign">免费注册</a></li>
				<li><a id="spc2" href="javascript:subToHP()">购物主页</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">我的<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:subToHX();">我的信息</a></li>
						<li><a href="#">订单信息</a></li>
						<li><a href="#">联系客服</a></li>
					</ul></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">购物车 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li role="separator" class="divider"></li>
						<li class="dropdown-header">Nav header</li>
						<li><a href="#">Separated link</a></li>
						<li><a href="#">One more separated link</a></li>
					</ul></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">收藏夹 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">收藏的店铺</a></li>
						<li><a href="#">收藏的商品</a></li>
					</ul></li>
			</ul>
			<ul class="nav navbar-nav navbar-right" style="padding-right: 300px">
				<li class="active"><a href="../navbar/">商品分类</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">商家中心<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">已卖出的宝贝</a></li>
						<li><a href="#">免费开店</a></li>
					</ul></li>
			</ul>
		</div>
	</div>
	</nav>
	<div class="container" style="width: auto">
		<!-- 标题和右侧显示 -->
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div style="display: flex; margin-top: -7px; margin-left: 200px;">
					<h1 style="display: flex;">
						<a href="javascript:subToHP()"
							style="color: #FF7F00; font-family: '华文新魏'; font-size: 54px; text-decoration: none; width: 113px">地猫</a>
						<a href="javascript:subToHP()"
							style="color: #FF7F00; padding-top: 15px; font-family: '华文新魏'; font-size: 32px; text-decoration: none">Dmall.com</a>
					</h1>
					<div>
						<ul class="topul">
							<li class="topli"><div class="topdiv0">
									<div class="topdiv1">1</div>
									<div class="topdiv2">查看购物车</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div class="topdiv0">
									<div class="topdiv">2</div>
									<div class="topdiv2">拍下商品</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div class="topdiv0">
									<div class="topdiv">3</div>
									<div class="topdiv2">付款</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div class="topdiv0">
									<div class="topdiv">4</div>
									<div class="topdiv2">确认收货</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div>
									<div class="topdiv">5</div>
									<div class="topdiv2">评论与售后</div>
								</div></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 选择电话地址，提交订单 -->
		<div class="row clearfix"
			style="background-color: white; border-top: inset; border-top-width: 1px;">
			<div class="col-md-2 column"></div>
			<!-- 选择电话地址 -->
			<div class="col-md-8 column">
				<br> <strong>选择收货地址</strong><br>
				<div>
					<div style="width: 1012.4px;" id="maxadrdiv">
						<c:forEach var="adr" items="${addresses}">
							<c:if test="${adr.state=='默认地址'}">
								<div class="adrdiv2">
									<div class="adrdiv1">
										<div style="display:none">${adr.addressid}</div>
										<strong>${adr.state}</strong>
										<div>收货人：${adr.receivename}</div>
										<div style="display:flex">
											<div>${adr.address}</div>
											<div style="padding-left:2px">${adr.phone}</div>
											<div style="padding-left:2px">${adr.email}</div>
										</div>
										<div>
											<a class="a1" href="findAddressid?addressid=${adr.addressid}">修改</a>
										</div>
									</div>
								</div>
							</c:if>
							<c:if test="${adr.state=='非默认地址'}">
								<div class="adrdiv">
									<div class="adrdiv1">
										<div style="display:none">${adr.addressid}</div>
										<div>${adr.state}</div>
										<div>收货人：${adr.receivename}</div>
										<div style="display:flex">
											<div>${adr.address}</div>
											<div style="padding-left:2px">${adr.phone}</div>
											<div style="padding-left:2px">${adr.email}</div>
										</div>
										<div>
											<a class="a1" href="findAddressid?addressid=${adr.addressid}">修改</a>
										</div>
									</div>
								</div>
							</c:if>
						</c:forEach>
					</div>
				</div>
				<div>
					<div style="margin-top: 10px; display: flex">
						<button class="btn btn-default" data-toggle="modal"
							data-target="#myModal">使用新地址</button>
						<a style="folat: right" id="adrhref" href="javascript:"
							target="_blank">管理我的地址</a>
					</div>
				</div>
				<br>
				<br> <strong>确认订单信息</strong>
				<table class="table">
					<thead>
						<tr>
							<th>商品信息</th>
							<th>商品参数</th>
							<th>单价</th>
							<th>数量</th>
							<th>金额</th>
						</tr>
					</thead>
					<tbody>
						<c:set var="moneyTotal" value="${0}" />
						<c:forEach var="cart" items="${cartList}">
							<tr>
								<td style="display:none">${cart.cart_id}</td>
								<td><a href=""><img src="${cart.img}"
										style="width: 50px"></a>${cart.good_name}</td>
								<td>规格：默认</td>
								<td>${cart.price}</td>
								<td>${cart.good_num}</td>
								<td class="total">${cart.good_num*cart.price}</td>
								<c:set var="moneyTotal"
									value="${moneyTotal+cart.good_num*cart.price}" />
							</tr>
						</c:forEach>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td style="font-size: 32px">总计：</td>
							<td style="color: red; font-size: 30px">￥${moneyTotal}</td>
						</tr>
					</tbody>
				</table>
				<div style="float: right">
					<a href="javascript:subToUI()" style="padding-right: 30px">返回购物车</a>
					<button class="btn btn-danger" onclick="butSubmit()">提交订单</button>
				</div>
			</div>
			<div class="col-md-2 column"></div>
			<br>
		</div>
	</div>
	<!-- 底部框 -->
	<div class="jumbotron text-center"
		style="margin-top: 100px; margin-bottom: 0; background-color: white">
		<br>
		<p>© 2022 ProfessionalDesign.com 版权所有</p>
		<a>关于我们</a>| <a>合作伙伴</a>| <a>营销中心</a>| <a>联系客服</a>| <a>开放平台</a>| <a>诚征英才</a>|
		<a>联系我们</a>| <a>网站地图</a>| <a>法律声明及隐私权政策</a>
	</div>
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">创建地址</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="modform" role="form">
						<input type="hidden" class="form-control" name="addressid"
							value="1"> <input type="hidden" class="form-control"
							name="userid" value="${user.userid}">
						<div class="form-group">
							<label for="receivename" class="col-sm-2 control-label">收货人</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="receivename"
									placeholder="请输入收货人姓名">
							</div>
						</div>
						<div class="form-group">
							<label for="address" class="col-sm-2 control-label">收货地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="address"
									placeholder="请输入收货地址">
							</div>
						</div>
						<div class="form-group">
							<label for="email" class="col-sm-2 control-label">邮件地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="email"
									placeholder="请输入邮件地址">
							</div>
						</div>
						<div class="form-group">
							<label for="phone" class="col-sm-2 control-label">电话/手机</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="phone"
									placeholder="请输入电话/手机">
							</div>
						</div>
						<div class="form-check" style="margin-left: 60px;">
							<input type="radio" class="form-check-input" id="radio1"
								name="state" value="非默认地址" checked="checked">非默认地址 <label
								class="form-check-label" for="radio1"></label>
						</div>
						<div class="form-check" style="margin-left: 60px;">
							<input type="radio" class="form-check-input" id="radio2"
								name="state" value="默认地址">默认地址 <label
								class="form-check-label" for="radio2"></label>
						</div>
						<button type="button" class="btn btn-default" id="submod">保存</button>
						<button type="reset" class="btn btn-default">重置</button>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
function butSubmit(){
	var carts = new Array();
	$adr=$($('.adrdiv2').find('.adrdiv1').children()[0]);
	var addressid=$adr.html();
	console.log('addressid='+addressid);
	var tdata=$('tbody').children('tr');
	for(var i=0;i<tdata.length-1;i++){
			var tddata=tdata.eq(i).find('td');
			var cart_id=parseInt(tddata.eq(0).html());
			var img=tddata.eq(1).find('a').find('img')[0].src;
			var price=parseInt(tddata.eq(3).html());
			var good_num=parseInt(tddata.eq(4).html());
			/* var dog = {"eyes":"eye","ages":1 } */
			var cartlist={"cart_id":cart_id,"img":img,"price":price,"good_num":good_num};
			carts.push(cartlist);
		}; 
		console.log(carts);
		var userid=${user.userid};
 	 var zoo = {"addressid":addressid,
 			 "carts":carts,
 			 "userid":userid}
 	 		console.log(zoo);
			 $.ajax({
				url: '/ProfessionalDesign/topay',
				type: 'post',
				headers:{'Content-Type': 'application/json'},//设置请求头
				dataType:'json',
				data: JSON.stringify(zoo),
				success: function(data) {
					if(data) {
					 location.href="/ProfessionalDesign/pay?orderid="+data;
					} else {
					  alert("提交订单时出错了，请稍后再试！");
					}
				}
			}); 
		};
</script>
<script>
	$(document).ready(function(){
	if(${user==null}){
		$("a").attr("href","${pageContext.request.contextPath}/login");
		$("#spc2").attr("href","javascript:subToHP()");
		$("#spc1").attr("href","sign");
	}
	});
	$(document).on('click','.adrdiv',function(){
		$(this).parent().find('.adrdiv2').attr('class','adrdiv');
		$(this).attr('class','adrdiv2');
	});
	$(document).on('click','.adrdiv2',function(){
		$(this).parent().find('.adrdiv2').attr('class','adrdiv');
		$(this).attr('class','adrdiv2');
	});
	function subToHX(){
		var form = $("<form>"); //定义一个form表单  
		form.attr('style', 'display:none'); //在form表单中添加查询参数  
		form.attr('method', 'post');
		form.attr('action', "toUserInfo");
		form.append('<input type="text" name="userid" value="${user.userid}">');
		$('body').append(form); //将表单放置在web中  
		form.submit(); //表单提交
	};
	$('.carousel').carousel({
	    interval: 2000
	});
	function subToHP(){
		if(${user!=null}){
			var form = $("<form>"); //定义一个form表单  
		form.attr('style', 'display:none'); //在form表单中添加查询参数  
		form.attr('method', 'post');
		form.attr('action', "homepage");
		form.append('<input type="text" name="userid" value="${user.userid}">');
		form.append('<input type="password" name="pwd" value="${user.pwd}">');
		$('body').append(form); //将表单放置在web中  
		form.submit(); //表单提交
		}
		else{
			window.location.href="homepage";
		}
	};
	$('#submod').click(function(){
		console.log('表单提交函数运行');//ajax实现模态框表单数据提交，再通过后端返回Address对象进行前端渲染
		var formdata=$('#modform').serialize();
		console.log(formdata);
		$.ajax({
			  url:"/ProfessionalDesign/adrmod",
			  method:"post",
			  contentType:'application/x-www-form-urlencoded;charset=utf-8',
			  data:formdata,
			  success:function (response) {
				  $('.adrdiv2').attr('class','adrdiv');
				  var data=$.parseJSON(response);
			  	      alert('保存成功');
			  	      console.log(data);
			  	      var address=getJsonValue(data,'address');
			  	      var receivename=getJsonValue(data,'receivename');
			  	      var email=getJsonValue(data,'email');
			  	      var phone=getJsonValue(data,'phone');
			  	      var state=getJsonValue(data,'state');
			  	      var addressid=getJsonValue(data,'addressid');
			  	      if(state=='默认地址'){ 
			  	    	  $("#maxadrdiv").append( "<div class=\"adrdiv2\">\r\n"
					+ "									<div class=\"adrdiv1\">\r\n"
					+ "										<strong>"+state+"</strong>\r\n"
					+ "										<div>收货人："+receivename+"</div>\r\n"
					+ "										<div>"+address+"&nbsp"+phone+"&nbsp"+email+"</div>\r\n"
					+ "										<div>\r\n"
					+ "											<a class=\"a1\" href=\"findAddressid?addressid="+addressid+"\">修改</a>\r\n"
					+ "										</div>\r\n"
					+ "									</div>\r\n"
					+ "								</div>");}
			  	      else{
			  	    	 $("#maxadrdiv").append( "<div class=\"adrdiv2\">\r\n"
			  					+ "									<div class=\"adrdiv1\">\r\n"
			  					+ "										<div>"+state+"</div>\r\n"
			  					+ "										<div>收货人："+receivename+"</div>\r\n"
			  					+ "										<div>"+address+"&nbsp"+phone+"&nbsp"+email+"</div>\r\n"
			  					+ "										<div>\r\n"
			  					+ "											<a class=\"a1\" href=\"findAddressid?addressid="+addressid+"\">修改</a>\r\n"
			  					+ "										</div>\r\n"
			  					+ "									</div>\r\n"
			  					+ "								</div>");}
			  	      }
			  	    
		})
	});
	//js获取json中的指定key的val
	function getJsonValue(obj,name){
		console.log(obj);
		console.log('json字符串转换');
	   var result = null;
	   var value  = null;
	   for(var key in obj){
	      value = obj[key];
	      console.log(value);
	      console.log('name='+name);
	      if(key == name){
	         return value;
	      } else {
	         if( typeof value == "object" ){
	            result = getJsonValue(value,name);
	         }
	      }
	   }
	   return result;
	};
	function subToUI(){
		var form = $("<form>"); //定义一个form表单  
		form.attr('style', 'display:none'); //在form表单中添加查询参数  
		form.attr('method', 'post');
		form.attr('action', "toUserInfo");
		form.append('<input type="text" name="userid" value="${user.userid}">');
		form.append('<input type="text" name="href" value="4">');
		$('body').append(form); //将表单放置在web中  
		form.submit(); //表单提交
	};
</script>
</html>